<template>
  <head-top></head-top>
  <div class="item_center">
    <div class="box_size">
      <div style="text-align: center">
        <span class="flash-title">轻松购秒杀</span>
      </div>
      <div v-if="flashSaleSessions!=null">
        <el-row>
          <el-col :span="2" style="text-align: center;background-color: red;">
            <span style="font-size: 25px">场次</span>
            <br>
            <span style="font-size: 20px">结束时间</span>
          </el-col>
          <el-col v-for="item in flashSaleSessions" :class="currentSessionId===item.id ? 'back' : ''" :span="6"
                  @click="changeSessionId(item.id)">
            <div style="text-align: center">
           <span style="color: red;font-size: 20px">
              {{ item.title }}
             <span v-if="!isAfter(item.startTime)">正在热卖！</span>
             <span v-else> 暂未开启</span>
           </span>
            </div>
            <div style="text-align: center">
              <countdown :time-str="item.endTime"></countdown>
            </div>
          </el-col>
        </el-row>
        <el-row gutter="10">
          <el-col v-for="item in currentSkuList" :span="6">
            <flash-sale-sku-card :sku="item" @selectSku="goDetail"></flash-sale-sku-card>
          </el-col>
        </el-row>
      </div>
      <div v-else style="text-align: center">
        <h2>很抱歉...最近没有秒杀活动呢...</h2>
        <el-image :src="require('@/assets/nodata.png')" style="height: 200px;width: auto"></el-image>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeadTop from "@/components/home/HeadTop";
import {getCurrentFlashSale, getSessionSku} from "@/api/flashSale";
import {computed, onMounted, ref} from 'vue'
import FlashSaleSkuCard from "@/components/commodity/FlashSaleSkuCard";
import Countdown from "@/components/common/countdown";
import {useRouter} from "vue-router";

let flashSaleSessions = ref(null)
let currentSessionId = ref('')
let currentSkuList = ref([])
let router=useRouter()

function getCurrentSessionAndSku() {
  getCurrentFlashSale().then(res => {
    if (res.data.length !== 0) {
      flashSaleSessions.value = res.data
      currentSessionId.value = res.data[0]?.id
      getSkuListBySessionId()
    } else {
      console.log("数据是空的呢" + res.data)
    }
  })
}

let isAfter = computed(()=>(timeStr) => {
  let time = new Date(timeStr)
  return time > Date.now();
})

function changeSessionId(sessionId) {
  currentSessionId.value = sessionId
  getSkuListBySessionId()
}

/**
 * 获取指定的场次下的sku
 */
function getSkuListBySessionId() {
  getSessionSku(currentSessionId.value).then(res => {
    currentSkuList.value = res.data
  })
}
function goDetail(skuId){
  router.push({
    path: '/home/commodity-detail',
    query: {
      skuId
    }
  })
}

onMounted(() => {
  //获取场次列表
  getCurrentSessionAndSku()
})
</script>

<style scoped>
.back {
  background-color: #098CC0;
}

.flash-title {
  font-size: 40px;
}
</style>
